<template>
	<div class="app-container">
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
				<el-button v-if="permission == 3" type="primary" icon="el-icon-edit" @click="linkToAddDatumSort">新增</el-button>
		</div>
		<div>
			<el-table :data="tableData" row-key="id" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" v-loading="listLoading" fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
		      	<el-table-column align="center" label="顺序号">
			        <template slot-scope="scope">
			          <span>{{scope.row.sort}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column align="center" label="资料类别">
			        <template slot-scope="scope" v-if="scope.row.name != '' && scope.row.name != null">
			          <span :class="scope.row.name.length > 20 ? 'c-text-ellipsis3' : ''">{{scope.row.name}}</span><span v-if="scope.row.name.length > 20" class="checkMore" @click="checkMore(scope.row.name)">更多</span>
			        </template>
			    </el-table-column>
			    <el-table-column  align="center" label="操作" v-if="permission == 3">
			        <template slot-scope="scope">
			          <p style="color: red;">
                  <b @click="deleteSort(scope.row.datumCatId)">删除</b><span class="color-409">|</span>
                  <b @click="editDatumSort(scope.row.datumCatId)">修改</b>
                </p>
			        </template>
			    </el-table-column>
		   </el-table>
		   <div class="block text-c">
				<!--分页组件 current-page:当前页   -->
				<!--   page-sizes:每页几条数据（选项）   -->
				<!--   page-size:每页几条数据   -->
				<!--   total:总条数   -->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.currentPage"
			      :page-sizes="[10, 20, 30, 40]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import { getCatList, deleteDatumCat } from '@/api/datum'
import { knowledge_datums } from '@/utils/permission'
export default {
  data() {
    return {
      permission: 3,
      listQuery: {
        page: 1,
        limit: 10,
        currentPage: 1, // 当前页
        total: null // 数据总条数
      },
      listLoading: false,
      tableData: []
    }
  },
  methods: {
    getModelPermission() {
      this.permission = knowledge_datums()
    },
    checkMore(message) {
      this.$alert(message, '', { confirmButtonText: '关闭' })
    },
    getCatList() {
      this.listLoading = true
      getCatList(this.listQuery).then(res => {
        if (res.data.statusCode == 200) {
          this.tableData = res.data.data.data
          this.listQuery.total = res.data.data.total
          this.listLoading = false
          console.log(res.data.data)
        }
      }).catch(err => {
        console.log('1111')
        console.log(err)
      })
    },
    linkToAddDatumSort() { // 隐藏增加分类组件
      this.$router.push({ path: '/datum/createDatumSort' })
    },
    deleteSort(datumCatId) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDatumCat(datumCatId).then(res => {
          if (res.data.statusCode == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getCatList()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        }).catch(err => {
          console.log('1111')
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editDatumSort(id) {
      this.$router.push({ path: `/datum/editDatumSort/${id}` })
      console.log(id)
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getCatList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) { // 切换当前页
      this.listQuery.page = val
      this.getCatList()
      console.log(`当前页: ${val}`)
    }
  },
  mounted() {
    this.getModelPermission()
    this.getCatList()
    this.listQuery.total = this.tableData.length
  }
}
</script>

<style scoped>
	b:hover{
		color: #0A76A4;
	}
	b{
		padding: 0 10px;
		cursor: pointer;
		font-weight: 500;
	}
	.block{
		padding: 20px 0;
	}
	.text-c{
		text-align: center;
	}
</style>
